

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
  },
  header: {
    backgroundColor: '#111827',
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  headerLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  backButton: {
    marginRight: 12,
    padding: 4,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '600',
    color: '#ffffff',
  },
  exportButton: {
    borderRadius: 8,
    overflow: 'hidden',
  },
  exportButtonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  exportButtonText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
    marginLeft: 8,
  },
  scrollView: {
    flex: 1,
    paddingHorizontal: 16,
  },
  dimensionTabsContainer: {
    marginTop: 16,
    marginBottom: 24,
  },
  dimensionTabsWrapper: {
    backgroundColor: '#111827',
    borderRadius: 12,
    padding: 4,
    flexDirection: 'row',
  },
  dimensionTab: {
    flex: 1,
    borderRadius: 8,
    overflow: 'hidden',
  },
  dimensionTabActive: {
    // Active styles handled by gradient
  },
  dimensionTabInactive: {
    backgroundColor: 'transparent',
  },
  dimensionTabGradient: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    alignItems: 'center',
  },
  dimensionTabTextActive: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
  dimensionTabTextInactive: {
    color: '#9ca3af',
    fontSize: 14,
    fontWeight: '500',
    textAlign: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
    marginBottom: 16,
  },
  statsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 16,
  },
  statCard: {
    width: '47%',
    backgroundColor: 'rgba(99, 102, 241, 0.1)',
    borderRadius: 12,
    padding: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  statCardContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  statCardTextContainer: {
    flex: 1,
  },
  statCardValue: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 4,
  },
  statCardLabel: {
    fontSize: 14,
    color: '#9ca3af',
  },
  efficiencyCard: {
    backgroundColor: 'rgba(99, 102, 241, 0.1)',
    borderRadius: 12,
    padding: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  efficiencyRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  efficiencyLabel: {
    fontSize: 16,
    color: '#d1d5db',
  },
  efficiencyValueGood: {
    fontSize: 16,
    fontWeight: '500',
    color: '#10b981',
  },
  efficiencyValueNormal: {
    fontSize: 16,
    fontWeight: '500',
    color: '#9ca3af',
  },
  efficiencyValueWarning: {
    fontSize: 16,
    fontWeight: '500',
    color: '#f59e0b',
  },
  distributionCard: {
    backgroundColor: 'rgba(99, 102, 241, 0.1)',
    borderRadius: 12,
    padding: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  distributionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  distributionLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  distributionColor: {
    width: 16,
    height: 16,
    borderRadius: 4,
    marginRight: 12,
  },
  distributionLabel: {
    fontSize: 16,
    color: '#d1d5db',
  },
  distributionRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  distributionValue: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    marginRight: 8,
  },
  distributionPercentage: {
    fontSize: 14,
    color: '#9ca3af',
  },
  trendCard: {
    backgroundColor: 'rgba(99, 102, 241, 0.1)',
    borderRadius: 12,
    padding: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  chartContainer: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    height: 96,
    marginBottom: 16,
  },
  chartBarWrapper: {
    alignItems: 'center',
    flex: 1,
  },
  chartBar: {
    width: 32,
    borderRadius: 4,
    marginBottom: 8,
  },
  chartBarLabel: {
    fontSize: 12,
    color: '#9ca3af',
  },
  chartSummary: {
    fontSize: 14,
    color: '#9ca3af',
    textAlign: 'center',
  },
  detailedCard: {
    backgroundColor: 'rgba(99, 102, 241, 0.1)',
    borderRadius: 12,
    overflow: 'hidden',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  detailedRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
  },
  detailedLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  detailedLabel: {
    fontSize: 16,
    color: '#d1d5db',
    marginLeft: 12,
  },
  detailedValueGood: {
    fontSize: 16,
    fontWeight: '500',
    color: '#10b981',
  },
  detailedValueBad: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ef4444',
  },
  detailedValueInfo: {
    fontSize: 16,
    fontWeight: '500',
    color: '#06b6d4',
  },
  detailedValueWarning: {
    fontSize: 16,
    fontWeight: '500',
    color: '#f59e0b',
  },
  detailedValueNormal: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  modalContainer: {
    backgroundColor: '#111827',
    borderRadius: 16,
    padding: 24,
    width: '100%',
    maxWidth: 320,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
    textAlign: 'center',
    marginBottom: 24,
  },
  modalButtons: {
    gap: 12,
  },
  modalButton: {
    borderRadius: 12,
    overflow: 'hidden',
  },
  modalButtonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  modalButtonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '500',
    marginLeft: 12,
  },
  modalCancelButton: {
    backgroundColor: '#374151',
    borderRadius: 12,
    paddingVertical: 12,
    paddingHorizontal: 16,
    alignItems: 'center',
  },
  modalCancelButtonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '500',
  },
});

